<template>
  <div class="bi-wrapper" :style="{border:'1px solid '+this.color}">
    <div :style="biCornerLeftTop"></div>
    <div :style="biCornerRightTop"></div>
    <div :style="biCornerLeftBottom"></div>
    <div :style="biCornerRightBottom"></div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name:'',
  components: {},
  data() {
    return {
    };
  },
  props: {
    color:{
        default:()=>{
            return '#2c3e50'
        }
    },
    cornerColor:{
        default:()=>{
            return '#a2b4f6'
        }
    },
    width:{
        default:()=>{
            return '8%'
        }
    },
    height:{
        default:()=>{
            return '5%'
        }
    }
  },
  watch: {},
  computed: {
    biCornerLeftTop(){
        return {
            position:'absolute',
            top:'0',
            left:'0',
            width:this.width,
            height:this.height,
            borderLeft:'1px solid '+this.cornerColor,
            borderTop:'1px solid '+this.cornerColor,
            zIndex:1
        }
    },
    biCornerLeftBottom(){
        return {
            position:'absolute',
            bottom:'0',
            left:'0',
            width:this.width,
            height:this.height,
            borderLeft:'1px solid '+this.cornerColor,
            borderBottom:'1px solid '+this.cornerColor,
            zIndex:1
        }
    },
    biCornerRightTop(){
        return {
            position:'absolute',
            top:'0',
            right:'0',
            width:this.width,
            height:this.height,
            borderRight:'1px solid '+this.cornerColor,
            borderTop:'1px solid '+this.cornerColor,
            zIndex:1
        }
    },
    biCornerRightBottom(){
        return {
            position:'absolute',
            bottom:'0',
            right:'0',
            width:this.width,
            height:this.height,
            borderRight:'1px solid '+this.cornerColor,
            borderBottom:'1px solid '+this.cornerColor,
            zIndex:1
        }
    }
  },
  created() {},
  mounted() {},
  methods: {

  }
};
</script>
<style scoped>
.bi-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

}
</style>